<template>
  <div class="w-full h-full">
    <div class="w-full h-full">
      <order-nav :title="$t('取消订单')"/>
      <div class="px-30 mt-30">
        <div class="flex rounded-2xl box-border px-24 pt-24 pb-31 tabBackground" >
          <img class="w-32 h-32 mr-18" src="~@/assets/image/c2c/Group41.png" alt="">
          <div class="font-26 c2cColor">
            <p class="font-28">{{$t('温馨提示')}}</p>
            <p class="my-20">{{$t('1. 如果您已经向卖家付款，请千万不要取消订单。')}}</p>
            <p>2. {{$t('累计3笔取消，当日不可再购买。')}}</p>
          </div>
        </div>
        <div class="mt-44">
          <h2 class="font-30 font-400 c2cColor">{{$t('请告诉我们您为什么要取消订单？')}}</h2>
          <van-radio-group v-model="radio">
            <van-radio
                class="mt-66"
                v-for="(item, index) in radioItems"
                :key="index"
                :name="item.title">
              <span>{{ item.title }}</span>
              <template #icon="props">
                <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"/>
              </template>
            </van-radio>
            <div class="flex items-center h-100 mt-36 tabBackground" >
              <van-radio name="其他">
                <span>{{$t('其他')}}</span>
                <template #icon="props">
                  <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon"/>
                </template>
              </van-radio>
            </div>
          </van-radio-group>
          <div class="textarea-wrapper relative mt-17 tabBackground">
            <textarea
                @input="changeVal"
                class="rounded-xl"
                :placeholder="$t('请输入取消理由')"
                maxlength="160"
                v-model="other"
            ></textarea>
            <span class="absolute bottom-30 right-22 font-25 text-grey">{{ inputNum }}/160</span>
          </div>
        </div>
        <div class="w-full mt-236 pb-100">
          <van-button
              :disabled="isDisabled"
              class="w-full rounded-xl"
              color="#1D91FF"
              type="info"
              @click="enterCancelOrder"
          >{{$t('确认取消订单')}}
          </van-button>
        </div>
      </div>
    </div>
    <!-- 取消订单成功 -->
    <van-popup class="w-full h-full" position="right" v-model="show">
      <cancel-success :detail="detail"/>
    </van-popup>
  </div>
</template>

<script>
import {Button, Popup, Radio, RadioGroup} from 'vant';
import OrderNav from "@/components/order-nav/OrderNav";
import CancelSuccess from "@/page/c2cOrder/components/order-generation/CancelSuccess";
import otcApi from '@/API/otc'
import {
  mapMutations
} from "vuex";

import {
  REASON_FOR_CANCELLATION
} from "@/store/const.store";

export default {
  name: "cancelOrder",
  data() {
    return {
      show: false, // 是否显示取消成功页面
      radio: this.$t('我不想交易了'),
      activeIcon: require("@/assets/image/c2c/Group1206.png"),
      inactiveIcon: require("@/assets/image/c2c/Ellipse112.png"),
      other: '', // 其他
      detail: {}, //取消后详情
      inputNum: 0,
      radioItems: [
        {
          title: this.$t('我不想交易了'),
        },
        {
          title: this.$t('我不满足广告交易条款的要求'),
        },
        {
          title: this.$t('卖家要额外收取费用'),
        },
        {
          title: this.$t('卖家收款方式右问题，无法成功打款'),
        },
      ]
    }
  },
  methods: {
    ...mapMutations('c2c', [REASON_FOR_CANCELLATION]),
    changeVal(e) {
      this.inputNum = e.target.value.length
    },
    enterCancelOrder() {
      let cancelText;
      if (this.radio === '其他') {
        cancelText = this.other;
      } else {
        cancelText = this.radio;
      }

      this[REASON_FOR_CANCELLATION](cancelText);

      const remark = this.other || this.radio
      const order_no = this.$store.state.c2c.order_no
      console.log(order_no, remark)
      // 取消订单
      otcApi.ctcOrderCancel({order_no, remark}).then(async res => {
        if(res.code / 1 === 0) {
          const res = await otcApi.ctcOrderGetDetail({ order_no, language: this.$i18n.locale });
          this.detail = res.data
          this.show = true
          this.$toast(this.$t('取消成功'))
        }
      })
    }
  },
  computed: {
    // ...mapState('c2cBuy', ['count', 'totalPrice', 'createOrderTime', 'orderNumber'])
    isDisabled() {
      if (this.radio === '其他') {
        return this.inputNum === 0
      } else {
        return false
      }
    }
  },
  created() {
    // console.log(this.count, this.totalPrice, this.createOrderTime, this.orderNumber)
    // const { detail } = this.$route.query
    // this.detail = JSON.parse(detail)
  },
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Button.name]: Button,
    [Popup.name]: Popup,
    OrderNav,
    CancelSuccess,
  }
}
</script>

<style lang="scss" scoped>
::v-deep .order-data {
  .title {
    color: #5EBA89;
  }
}
.img-icon {
  width: 32px;
  height: 32px;
}

.textarea-wrapper {
  textarea {
    width: 100%;
    height: 304px;
    padding: 30px 22px;
    box-sizing: border-box;
    background: transparent;

    &::placeholder {
      color: #B8BCC5;
    }
  }
}
::v-deep{
  .van-cell {
      padding: 0 !important;
    }
  .van-radio{
    align-items:flex-start
    }
  .van-radio__label{
    color:$text_color1
  }
  .van-button--info{
    background: $btn_main!important;
      border-color: $btn_main !important;
  }
}
</style>
